<template>
  <page-header-wrapper>
    <a-card :bordered="false" v-show="$store.state.WFStore.TypesIsShow">
      <h3 class="title">证件制作 <span>可制作用于发放申领的证件模板</span></h3>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索">
                <a-input v-model="queryParam.template_name" placeholder="输入模板名称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="模板状态">
                <a-select style="width: 120px" :loading="selectLoading" v-model="queryParam.template_type">
                  <a-select-option :value="i" v-for="(v, i) in status_list" :key="i"> {{ v }} </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="领证有效期">
                <a-range-picker @change="changeRange1" :placeholder="['开始时间', '结束时间']" v-model="date1" />
                <!-- <a-date-picker @change="onChangeDate" placeholder="请选择日期" v-model="queryParam.date1" /> -->
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="证件有效期">
                <a-range-picker @change="changeRange2" :placeholder="['开始时间', '结束时间']" v-model="date2" />
                <!-- <a-date-picker @change="onChangeDate" placeholder="请选择日期" v-model="queryParam.date2" /> -->
              </a-form-item>
            </a-col>

            <a-col :md="(!advanced && 8) || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <div class="table-operator-left">
          <!-- <span>操作</span>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 签发 </a-button>
          <a-button type="primary" :disabled="!hasSelected" @click="start"> 拒签 </a-button> -->
        </div>
        <a-button type="primary" @click="newAddCard">新增证件模版</a-button>
      </div>

      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        :alert="false"
        showPagination="auto"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleDetails(record)">详情</a>
            <a-divider type="vertical" />
            <a @click="handleCertification(record)" v-if='record.operation'>发证</a>
          </template>
        </span>
      </s-table>
    </a-card>
    <a-card :bordered="false" v-show="!$store.state.WFStore.TypesIsShow">
      <h3 class="title">编辑证件模板 <span>可制作用于发证的证件模板，属性标题创建后不可编辑</span></h3>
      <NewsDetail :template_id="template_id" :key="timestamp" />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { getTemplateList, getStatusList } from '@/api/news'
import NewsDetail from './NewsDetail'
import moment from 'moment'
// moment(values.releaseTime).format('YYYY-MM-DD HH:mm:ss')

const columns = [
  {
    title: '模版ID',
    dataIndex: 'id',
  },
  {
    title: '证件样式',
    dataIndex: 'style_id',
    scopedSlots: { customRender: 'style_id' },
  },
  {
    title: '证件模版名称',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '领证有效期至',
    dataIndex: 'send_code_end',
    scopedSlots: { customRender: 'send_code_end' },
  },
  {
    title: '证件有效期至',
    dataIndex: 'card_end',
    scopedSlots: { customRender: 'card_end' },
  },
  {
    title: '发放量',
    dataIndex: 'send_count',
    scopedSlots: { customRender: 'send_count' },
  },
  {
    title: '领用量',
    dataIndex: 'get_count',
    scopedSlots: { customRender: 'get_count' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '130px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  name: 'NewsTypes',
  components: {
    STable,
    Ellipsis,
    NewsDetail,
  },
  data() {
    this.columns = columns
    return {
      advanced: false,
      // 查询参数
      queryParam: { template_type: '0' },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        this.queryParam.template_card_start =
          this.date2.length > 0 ? moment(this.date2[0]._d).format('YYYY-MM-DD') + ' 00:00:00' : ''
        this.queryParam.template_card_end =
          this.date2.length > 0 ? moment(this.date2[1]._d).format('YYYY-MM-DD') + ' 23:59:59' : ''
        this.queryParam.template_start =
          this.date1.length > 0 ? moment(this.date1[0]._d).format('YYYY-MM-DD') + ' 00:00:00' : ''
        this.queryParam.template_end =
          this.date1.length > 0 ? moment(this.date1[1]._d).format('YYYY-MM-DD') + ' 23:59:59' : ''
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        requestParameters.template_type = parseInt(requestParameters.template_type)
        return getTemplateList(requestParameters)
          .then((res) => {
            if (res.data.list) {
              // res.data.list.style_id = '样式一'
              res.data.list.forEach((v, i) => {
                console.log(v)
                v.style_id = '样式一'
                if (!v.send_count) {
                  v.send_count = 0
                }
                if (!v.get_count) {
                  v.get_count = 0
                }
              })
              return res.data
            } else {
              return {
                count: 0,
                list: [],
              }
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      selectedRowKeys: [],
      selectLoading: false,
      date1: [],
      date2: [],
      template_id: null,
      templateTypeList: [],
      status_list: {},
      timestamp: '',
    }
  },
  created() {
    // console.log(this.$store)
  },
  mounted() {
    // 请求状态列表
    getStatusList({ company_id: 0 })
      .then((res) => {
        // 待处理
        this.status_list = res.data.template_status.status_list
      })
      .catch((err) => {
        console.log(err)
      })
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    isShow() {
      return this.$store.state.WFStore.TypesIsShow
    },
  },

  watch: {
    isShow(newVal, oldVal) {
      //do something
      if (newVal) {
        this.template_id = null
        this.$refs.table.refresh(true)
      }
    },
  },
  methods: {
    // 重置按钮
    handleReset() {
      this.queryParam = { template_type: '0' }
      this.date1 = []
      this.date2 = []
      this.$refs.table.refresh(true)
    },
    // 选择列表项
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onChangeDate(value) {},
    // 表格头部炒作按钮
    start() {
      this.loading = true
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false
        this.selectedRowKeys = []
      }, 1000)
    },
    // 表格详情按钮
    handleDetails(values) {
      // console.log(values)
      this.timestamp = new Date().valueOf()
      this.template_id = values.id
      this.$router.push({ name: 'NewsTypes', query: { isShow: 1, id: values.id, timestamp: this.timestamp } })
    },
    // 新增发证按钮
    newAddCard() {
      this.timestamp = new Date().valueOf()
      this.template_id = null
      this.$router.push({ name: 'NewsTypes', query: { isShow: 1, timestamp: this.timestamp } })
      this.tableRef = this.$refs.table
    },
    // 表格发证按钮
    handleCertification(values) {
      this.$router.push({ name: 'NewsList', query: { isShow2: 1, id: values.id } })
    },
    // 日期修改
    changeRange1(v) {
      this.date1 = v
    },
    changeRange2(v) {
      this.date2 = v
    },
  },
}
</script>
<style lang="less" scoped>
.title {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  span {
    font-size: 12px;
    margin-left: 10px;
    color: #999;
  }
}
.table-operator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding-top: 20px;
  &-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    span {
      margin-right: 10px;
    }
  }
}
</style>
